export default function DevTools() {
  return {
    $template: `
      <div>
        <button v-if="!show" class="weekly-report-icon devtools-icon" @click="showPanel">工具</button>
        <div v-else class="weekly-report devtools" :class="{ show: show }">
          <div class="devtools--item">
            <div>获取菜单权限</div>
            <input v-model="menuName"></textarea>
            <button @click="queryAuth">查询</button><button @click="clearAuth">清空</button>
            <div>{{currentAuth}}</div>
          </div>
          <div class="devtools--item">
            <div>更改价格权限</div>
            <span class="priceShield" v-for="item in priceShield" :key="item.name">
              <input type="checkbox" v-model="item.value" @input="changePriceShield(item)"></input>
              <span @click="clickPriceShield(item)">{{item.name}}</span>
            </span>
          </div>
          <div class="weekly-report-footer">
            <button @click="show = false">关闭</button>
          </div>
        </div>
      </div>
    `,
    show: false,
    showPanel() {
      this.show = true
      this.getPriceShield()
    },
    menuName: '',
    currentAuth: null,
    queryAuth() { 
      if (!this.menuName) { 
        this.currentAuth = null
        return
      }
      const menuList = localStorage.getItem('menuList')

      const fn = (list) => { 
        return list.find(item => {
          if (item.name.includes(this.menuName)) {
            this.currentAuth = {
              auth: item.meta.auth,
              code: item.meta.code,
              title: item.meta.title
            }
            return true
          } else if (item.children) { 
            return !!fn(item.children)
          }
          return false
        })
      }
      fn(JSON.parse(menuList))
    },
    clearAuth() { 
      this.currentAuth = null
      this.menuName = ''
    },
    priceShield: [],
    getPriceShield() {
      this.priceShield = [
        {
          name: '成本价',
          value: localStorage.getItem('shieldCostPrice') === '1' ? true : false,
          feild: 'shieldCostPrice'
        },
        {
          name: '配送价',
          value: localStorage.getItem('shieldDeliveryPrice') === '1' ? true : false,
          feild: 'shieldDeliveryPrice'
        },
        {
          name: '进货价',
          value: localStorage.getItem('shieldPurchasePrice') === '1' ? true : false,
          feild: 'shieldPurchasePrice'
        },
        {
          name: '批发价',
          value: localStorage.getItem('shieldWholesalePriceFlag') === '1' ? true : false,
          feild: 'shieldWholesalePriceFlag'
        },
      ]
    },
    changePriceShield(item) { 
      localStorage.setItem(item.feild, !item.value ? '1' : '0')
    },
    clickPriceShield(item) { 
      item.value = !item.value
      localStorage.setItem(item.feild, item.value ? '1' : '0')
    }
  }
}